{% extends "_layouts/examples.html" %}
{% block title %}Badge / Colors{% endblock %}

{% block standalone_css %}patterns_badge{% endblock %}

{% block content %}

<span class="p-badge" aria-label="9 items exist">9</span>
<span class="p-badge" aria-label="more than 999 items exist">999+</span>
<span class="p-badge" aria-label="approximately 1 million items exist">1M</span>
<span class="p-badge" aria-label="approximately 2.5 billion items exist">2.5B</span>
<span class="p-badge" aria-label="approximately 25 thousand items exist">25k</span>

</br>

<span class="p-badge--negative" aria-label="9 items exist">9</span>
<span class="p-badge--negative" aria-label="more than 999 items exist">999+</span>
<span class="p-badge--negative" aria-label="approximately 1 million items exist">1M</span>
<span class="p-badge--negative" aria-label="approximately 2.5 billion items exist">2.5B</span>
<span class="p-badge--negative" aria-label="approximately 25 thousand items exist">25k</span>
{% endblock %}
